<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <p>我是谁</p>
  <p>我是谁</p>
  <p>我是谁</p>
  <p>我是谁</p>
  <p>我是谁</p>
  <p>我是谁</p>
  <p>我是谁</p>
  <p>我是谁</p>
  <p>我是谁</p>
  <p>我是谁</p>
  <p>我是谁</p>
  <p>我是谁</p>
  <p>我是谁</p>
  <p>我是谁</p>
  <p>我是谁</p>
  <p>我是谁</p>
  <p>我是谁</p>
  <p>我是谁</p>
  <p>我是谁</p>
  <p>我是谁</p>
  <p>我是谁</p>
  <p>我是谁</p>
  <p>我是谁</p>
  <p>我是谁</p>
  <p>我是谁</p>
  <p>我是谁</p>
  <p>我是谁</p>
  <p>我是谁</p>
  <p>我是谁</p>
  <p>我是谁</p>
  <p>我是谁</p>
  <p>我是谁</p>
  <p>我是谁</p>
  <p>我是谁</p>
  <p>我是谁</p>
  <p>我是谁</p>
  <p>我是谁</p>
  <p>我是谁</p>
  <p>我是谁</p>
  <p>我是谁</p>
  <img src="" data-src="./lanjiazai.jpg" alt="">
  <img src="" data-src="./lanjiazai.jpg" alt="">
  <p>我是谁</p>
  <p>我是谁</p>
  <p>我是谁</p>
  <p>我是谁</p>
  <p>我是谁</p>
  <p>我是谁</p>
  <p>我是谁</p>
  <p>我是谁</p>
  <p>我是谁</p>
  <p>我是谁</p>
  <p>我是谁</p>
  <p>我是谁</p>
  <p>我是谁</p>
  <p>我是谁</p>
  <p>我是谁</p>
  <p>我是谁</p>
  <p>我是谁</p>
  <p>我是谁</p>
  <p>我是谁</p>
  <p>我是谁</p>
  <p>我是谁</p>
  <p>我是谁</p>
  <p>我是谁</p>
  <p>我是谁</p>
  <p>我是谁</p>
  <p>我是谁</p>
  <p>我是谁</p>
  <p>我是谁</p>
  <p>我是谁</p>
  <p>我是谁</p>
  <p>我是谁</p>
  <p>我是谁</p>
  <p>我是谁</p>
  <img src="" data-src="./lanjiazai.jpg" alt="">
  <img src="" data-src="./lanjiazai.jpg" alt="">
  <img src="" data-src="./lanjiazai.jpg" alt="">
  <img src="" data-src="./lanjiazai.jpg" alt="">
  <img src="" data-src="./lanjiazai.jpg" alt="">
  <img src="" data-src="./lanjiazai.jpg" alt="">
  <img src="" data-src="./lanjiazai.jpg" alt="">
  <img src="" data-src="./lanjiazai.jpg" alt="">
  <img src="" data-src="./lanjiazai.jpg" alt="">
  <img src="" data-src="./lanjiazai.jpg" alt="">
  <img src="" data-src="./lanjiazai.jpg" alt="">
  <img src="" data-src="./lanjiazai.jpg" alt="">
  <img src="" data-src="./lanjiazai.jpg" alt="">
  <img src="" data-src="./lanjiazai.jpg" alt="">
  <img src="" data-src="./lanjiazai.jpg" alt="">
  <img src="" data-src="./lanjiazai.jpg" alt="">
  <script>
    // 与普通的图片懒加载不同，如下这个多做了 2 个精心处理：
    // 图片全部加载完成后移除事件监听；
    // 加载完的图片，从 imgList 移除；
    // let imgList = [...document.querySelectorAll('img')]
    // let length = imgList.length
    // const imgLazyLoad = function () {
    //   let count = 0
    //   return (function () {
    //     // console.log(1);
    //     let deleteIndexList = []
    //     imgList.forEach((img, index) => {
    //       // 遍历这里面的每一个img标签
    //       let rect = img.getBoundingClientRect()
    //       if (rect.top < window.innerHeight) {
    //         // 如果距离顶部的高度小于窗口的高度 就显示图片
    //         img.src = img.dataset.src
    //         count++ // 计数器++
    //         deleteIndexList.push(index) // 将当前元素的下标放入这个删除了的数组中
    //         if (count === length) {
    //           document.removeEventListener('scroll', imgLazyLoad) // 移除监听函数
    //         }
    //       }
    //     })
    //     imgList = imgList.filter((img, index) => !deleteIndexList.includes(index))
    //   })()
    // }
    // document.addEventListener('scroll', imgLazyLoad)
    let imgList = [...document.querySelectorAll('img')] // 获得所有的图片节点
    let length = imgList.length // 获得这个长度
    function imgLazyLoad () {
      let count = 0 // 记录这个的数量
      return (function () {
        let deleteIndexList = [] // 删除的下标
        imgList.forEach((item, index) => {
          let reat = item.getBoundingClientRect()
          if (reat.top < window.innerHeight) {
            item.src = item.dataset.src
            count++
            deleteIndexList.push(index)
            if (count === length) {
              document.removeEventListener('scroll', imgLazyLoad)
            }
          }
        })
        imgList = imgList.filter((item, index) => !deleteIndexList.includes(index))
      })()
    }
    document.addEventListener('scroll', imgLazyLoad)
  </script>
</body>

</html>